<template>
	<view class="change_phone">
		<u-form :model="passInfo" ref="passInfoForm" class="pass_info_form" >
			<u-form-item label="原手机号" prop="oldPhone" label-width="180">
				<u-input v-model="passInfo.oldPhone" disabled/>
			</u-form-item>
			<u-form-item label="新手机号" prop="newPhone" label-width="180" >
				<u-input v-model="passInfo.newPhone" placeholder="输入新手机号" />
			</u-form-item>
			<u-form-item label="验证码" prop="code" label-width="180" >
				<u-input v-model="passInfo.code" placeholder="输入验证码" />
				<view slot="right">
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
					<text style="color: #41c5aa;" @click="getCode">{{tips}}</text>
				</view>
		
			</u-form-item> 
		</u-form>
		
		<view @click="submitInfo" class="submit_info">
			<text>确定</text>
		</view>
	</view>
</template>

<script>
	import {checkPhone} from '@/utils/utils.js'
	export default {
		onReady() {
			this.$refs.passInfoForm.setRules(this.rules);
		},
		data() {
			return {
				userInfo: {}, // 用户信息
				seconds: 60,
				tips: "",
				passInfo: {
					oldPhone: '',
					newPhone: '',
					code: '', 
				}, // 提交表单
				rules: {
					newPhone: [
						{ 
							required: true, 
							message: '请输入姓名', 
							trigger: ['change','blur'],
						}
					],
					code: [
						{ 
							required: true, 
							message: '请输入验证码', 
							trigger: ['blur'],
						}
					],
				}, // 验证规则
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					that.userInfo = res.data
					that.passInfo.oldPhone = res.data.userInfo.phone
				},
				fail: (res) => {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					})
				}
			})
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(!checkPhone(this.passInfo.newPhone)){
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none',
						duration: 1000
					})
					return false
				}
				if (this.userInfo.userInfo.phone == this.passInfo.newPhone) {
					uni.showToast({
						title: '新手机号与原手机号相同',
						icon: 'none',
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					uni.hideLoading();
					this.$refs.uCode.start();
					this.$mrequest({
						url: 'wechat/send_sms',
						method: 'GET',
						data: {
							phone: this.passInfo.newPhone,
							name: 'changePhone'
						},
						callBack: function callBack (res) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						},
						fail: function fail (res) {
							this.$refs.uCode.end();
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				} else {
					this.$u.toast('请倒计时结束后再发送');
				}
			},
			submitInfo() {
				var that = this
				this.$refs.passInfoForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						that.$mrequest({
							url: 'wechat/changePhone',
							method: 'POST',
							data: {
								phone: that.passInfo.newPhone,
								sms_code: that.passInfo.code
							},
							callBack: function callBack (res) {
								console.log('成功了奥里给', res)
								if (res.status) {
									that.userInfo.userInfo.phone = that.passInfo.newPhone
									that.userInfo.userInfo.phone_str = that.passInfo.newPhone.substring(0, 3)+"****"+that.passInfo.newPhone.substr(tel.length-4);
									//  修改storage中的数据
									uni.setStorage({
									    key: 'userInfo',
									    data: that.userInfo,
									    success: function () {
									        uni.navigateBack()
									    }
									});
								}
							},
							fail: function fail (res) {
								// console.log('失败了给爷爬', res)
							}
						})
					} else {
						// console.log('验证失败');
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	.change_phone {
		padding: 30rpx;
		height: 100vh;
		background-color: #f7f6f9;
		.pass_info_form{
			
			background-color: #fff;
		}
		.submit_info {
			margin-top: 300rpx;
			width: 690rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			box-shadow: 0px 5rpx 12rpx 1rpx rgba(68, 198, 170, 0.3);
			border-radius: 45rpx;

		}
	}
</style>
